<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-page-header__content{
      color: white;
    }
  </style>
</head>
<body>
<div id="app">
  <el-page-header style="background-color: #0096dc;
  color: white;line-height: 60px"
                  @back="goBack" content="添加商品简介">
  </el-page-header>
  <!--表单开始-->
    <el-card style="width: 600px;height: 700px;margin: 0 auto">
      <el-form label-width="80px">
        <el-form-item label="少儿">
          <el-input type="text" v-model="p.messageone"></el-input>
        </el-form-item>
        <el-form-item label="精英">
          <el-input type="text" v-model="p.messagetwo"></el-input>
        </el-form-item>
        <el-form-item label="成人">
          <el-input type="text" v-model="p.messagethree"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="upload()">上传信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  <!--表单结束-->


</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        arr:[],
        p:{messageone:"",messagetwo:"",messagethree:""}
      }
    },
   methods:{
      upload(){
        if (v.p.messageone==""){
          v.$message.error("请输入上传信息");
          return;
        }
        //发出添加商品的请求
        axios.post("/product/insert",v.p).then(function () {
            alert("添加完成!");
            location.href="/admin.html?currentIndex=3-1";
        })
      },
     handleSuccess(response,file,fileList){
       v.p.url = response;
     },
     goBack() {
       console.log('go back');
       //返回上一页面
       history.back();
     },
   created:function () {
     //发请求获取分类的数据
     axios.get("/product/select").then(function (response) {
       v.arr = response.data;
     })
   }
  })
</script>
</html>